﻿<!DOCTYPE html>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="../font-awesome/css/font-awesome.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.css" rel="stylesheet" />
<link href="../js/plugins/layer/skin/layer.ext.css" rel="stylesheet" />
<link href="../css/bootstrap.min.css" rel="stylesheet" />
<link href="../css/style.min.css" rel="stylesheet" />
<link href="../css/bootstrap-datetimepicker/css/bootstrap-datetimepicker.min.css" rel="stylesheet" />
<script src="../js/jquery-2.1.1.min.js"></script>
<script src="../js/plugins/layer/layer.min.js"></script>
<script src="../js/plugins/linq/linq.js"></script>
<script src="../js/plugins/bootstrap-datetimepicker/js/bootstrap-datetimepicker.js"></script>
<script src="../js/echarts.js"></script>
<style>
    .form-control {
        display: initial;
        width: auto;
        margin-right: 10px;
        padding: 0px;
        height:25px
    }
     .container {
         display: block;
         position: relative;
         margin: 10px auto;
         width: 100%;
     }
    #search-Part,.input-date {
        max-width: 150px
    }
    .form-control{
    		display: inline-block;
    	}
</style>
<html>
<head>
    <title>任务提交率报表</title>
</head>
<body>
<div class="container" style="margin-top: 5px">
<div class="row clearfix first" style="background-color: #e7eaec;">
    <label>筛选条件</label>
    </div>
    <div class="row clearfix second" style="padding: 10px 0;">
        <div class="col-sm-11 column">
            <label>陈列师:</label>&nbsp&nbsp
            <select class="form-control" id="search-Part">
                <option value="">请选择</option>
            </select>
            <label>任务时间:</label>&nbsp&nbsp
            <input id="startTime" class="input-date" type="text" placeholder="开始时间" readonly="readonly" />
            <label>至</label>&nbsp&nbsp
            <input id="endTime" class="input-date" type="text" placeholder="结束时间" readonly="readonly" />
        </div>
        <div class="col-sm-1 column">
            <button type="button" class="btn btn-sm btn-primary m-t-n-xs pull-right" id="search-Btn">查询</button>
        </div>
    </div>
    <div class="row clearfix third" style="background-color: #e7eaec;">
        <label>陈列师列表</label>
    </div>
<div class="row clearfix">
    <div id="chart" style="min-height: 500px;"></div>
    </div>
    </div>
</body>
</html>
<script>
    $(function () {
        $('.input-date').datetimepicker({
            format: "yyyy-mm-dd",
            autoclose: true,
            minView: 2
        });
        var date1 = new Date();
        var date2 = new Date();
        date2.setDate(date1.getDate() - 7);
        var month1 = date1.getMonth() < 9 ? ("0" + (date1.getMonth() + 1)) : (date1.getMonth() + 1);
        var month2 = date2.getMonth() < 9 ? ("0" + (date2.getMonth() + 1)) : (date2.getMonth() + 1);
        $("#endTime").val(date1.getFullYear() + "-" + month1 + "-" + (date1.getDate() < 10 ? ("0" + date1.getDate()) : date1.getDate()));
        $("#startTime").val(date2.getFullYear() + "-" + month2 + "-" + (date2.getDate() < 10 ? ("0" + date2.getDate()) : date2.getDate()));

        var loadPartList = function () {
            var s = layer.load(0,
                {
                    shade: [0.2, '#fff'] //0.1透明度的白色背景
                });
            $.post("TaskHandler.ashx",
                {
                    "action": "GetDisplayList",
                },
                function (data) {
                    var sPart = $("#search-Part");
                    if (data.Success == true) {
                        var sHtml = "";
                        data.Data.map(function (item, i) {
                            sHtml += '<option value=' + item + '>' + item + '</option>';
                        });
                        sPart.append(sHtml);
                    }
                    layer.close(s);
                });
        }

        loadPartList();

        function addTableClass() {
            var colWidth = $(".container .col-sm-11").width() * 0.15;
            $("#search-Part").width(colWidth);
            $(".input-date").width(colWidth);
        }
        addTableClass();

        $(window).resize(function() {
            addTableClass();
        });

        function loadTaskReport(OperatorAreaName) {
            var s = layer.load(0,
                {
                    shade: [0.2, '#fff'] //0.1透明度的白色背景
                });
            $.post("TaskHandler.ashx",
                {
                    "action": "GetTaskReport",
                    "OperatorAreaName": OperatorAreaName,
                    "StartDate": $("#startTime").val(),
                    "EndDate": $("#endTime").val(),
                },
                function (data) {
                    if (data.Success) {
                        var xArray = Enumerable.From(data.Data).Select("d=>d.TaskType").ToArray();
                        var yArray1 = Enumerable.From(data.Data).Select("d=>d.Sum").ToArray();
                        var yArray2 = Enumerable.From(data.Data).Select("d=>d.ReadSum").ToArray();
                        bindChart(xArray, yArray1, yArray2);
                    } else {
                        layer.alert(data.Message,
                            {
                                icon: 1,
                                skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                            });
                    }
                    layer.close(s);
                });
        }

        function bindChart(xArray, yArray1, yArray2) {
            // var html = "<div id=\"chart_\"+" + name + " style=\"width: 700px; height: 400px;\"></div>";
            var myChart = echarts.init($("#chart")[0]);
            // 指定图表的配置项和数据
            var option = {
                tooltip: {
                    trigger: 'axis'
                },
                legend: {
                    data: ['总任务数', '已读任务数']
                },
                toolbox: {
                    show: true,
                    feature: {
                        dataZoom: {
                            yAxisIndex: 'none'
                        },
                        dataView: { readOnly: false },
                        magicType: { type: ['line', 'bar'] },
                        restore: {},
                        saveAsImage: {}
                    }
                },
                xAxis: {
                    axisLabel: {
                        interval: 0,
                        rotate: 20,
                        margin: 3,
                        textStyle: {
                            color: "#222"
                        }
                    },
                    data: xArray.map(function (item) {
                        return item;
                    })
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    name: '总任务数',
                    type: 'line',
                    data: yArray1,
                }, {
                        name: '已读任务数',
                    type: 'line',
                    data: yArray2,
                }]
            };
            // 使用刚指定的配置项和数据显示图表。
            myChart.setOption(option);
            window.onresize = myChart.resize;
            //window.addEventListener('resize', function () {
            //    var height = $(".container").parents("html").height() -
            //        $(".first").height() -
            //        $(".second").height() -
            //        $(".third").height();
            //    $("#chart").height(height);
            //    myChart.resize();
            //});
        }

        $("#search-Btn").on("click", function () {
            var Display = $("#search-Part").find("option:selected").text();
            if (Display=="请选择") {
                layer.alert('请选择陈列师！',
                    {
                        icon: 1,
                        skin: 'layer-ext-moon' //该皮肤由layer.seaning.com友情扩展。关于皮肤的扩展规则，去这里查阅
                    });
                return false;
            }
            loadTaskReport(Display);
        });
    });
</script>
